<template>
    <div class="container">
         <!-- 面包屑 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>头条上传</el-breadcrumb-item>
            <el-breadcrumb-item>
                <span class="u-cursor" @click="$router.back()">计划管理</span>
            </el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 表格 -->
        <Container>
            <!-- 标题 -->
            <ContainerTitle>头条账号管理</ContainerTitle>
              <el-input placeholder="请输入广告组ID/账户/产品名称/客户名称" v-model="accountIdAndName" class="input-with-select" >
                <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
            <!-- 按钮区 -->
             <div class="btns">
                   <el-button type="primary" @click="dialogs">设置监控预警</el-button>
                   <el-button type="primary" @click="earlyWarningMode">设置预警方式</el-button>
                   <!-- <el-button type="primary">主要按钮</el-button> -->
             </div>
             <!-- 表格 -->
             <el-table
                ref="multipleTable"
                border 
                stripe
                tooltip-effect="dark"
                :data="accountList"
                style="width: 100%"
                @selection-change="handleSelectionChange">
                    <el-table-column
                        type="selection"
                        width="55" >
                    </el-table-column>
                     <el-table-column
                       align="center"
                        v-for="(item, index) in filterTableColumn"
                        :label="item.label"
                        :key="index">
                        <template slot-scope="scope">
                            <!-- 其他 -->
                            <template >{{ scope.row[item.prop] }}</template>
                        </template>

                    </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                background
                :page-sizes="[50, 100, 500, 1000]"
                :page-size="page.pageSize"
                layout="total, prev, pager, next, sizes"
                :total="pageTotal"
                @size-change="handlePagerSizeChange"
                @current-change="handlePagerCurrentChange"
            />
            <!-- 弹框 -->
            <el-dialog
                title="设置监控预警"
                :visible.sync="dialogVisible"
                width="60%"
                :before-close="handleClose">
                <div class="dialog-content">
                    <div class="dialog-content-title">
                        <p>【注意】</p>
                        <p>1、消耗、转化成本均按账户层级设置</p>
                        <p>2、按天设置，即 每日 00:001-23:59</p>
                        <p>3、金额范围：0.01-1000000</p>
                        <p>4、0为不设置上限</p>
                    </div>
                    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="toutiao-demo-ruleForm" >
                        <el-form-item label="设置层级【默认】" >
                          按账户
                        </el-form-item>
                        <el-form-item label="账户总消耗上限(元/天)"  prop="consume">
                          <el-input v-model="ruleForm.consume" type="number" placeholder="0为不设上限;范围0-1000000"></el-input>
                        </el-form-item>
                        <el-form-item label="账户累计转化成本上限(元/天)" prop="conversion_cost">
                          <el-input v-model="ruleForm.conversion_cost" type="number" placeholder="0为不设上限;范围0-1000000"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="getAccount">确 定</el-button>
                </span>
            </el-dialog>

        </Container>
    </div>
</template>
<script>
import Container from "@/components/container";
import ContainerTitle from "@/components/container-title";
import CustomTableColumn from "@/components/custom-table-column";

export default {
  components: {
    Container,
    CustomTableColumn,
    ContainerTitle,
  },
  data(){
      var num = (rule, value, callback) => {
        if (value <'0') {
          callback(new Error('输入内容不能小于0'));
        } else if(typeof value != Number){
           callback(new Error('输入内容不能为汉字'));
        } else {
          callback();
        }
        
      };
      
      return {
          accountIdAndName:"",
          dialogVisible: false,
          tableColumn: [
                {
                    label: "广告主ID",
                    prop: "accountId",
                    visible: true
                },
                {
                    label: "账号名称",
                    prop: "accountName",
                    visible: true
                },
                {
                    label: "账户总消耗上限(元/天)",
                    prop: "consume",
                    visible: true
                },
                {
                    label: "账户累计转化成本上限(元/天)",
                    prop: "conversion_cost",
                    visible: true
                },
                {
                    label: "预警方式",
                    prop: "dingTalkName",
                    visible: true
                }
          ],
          multipleSelection: [],
          ruleForm:{
              consume:"",
              conversion_cost:""

          },
          rules:{
             consume:[
                 { required: true, message: '请输入账号总消耗金额', trigger: 'blur' },
                 { validator:num, trigger: 'blur' }
             ],
             conversion_cost:[
                  { required: true, message: '请输入账户累计转化成本上限金额', trigger: 'blur' },
                  { validator:num, trigger: 'blur' }
             ]
          },
          page: {
            pageNo: 1,
            pageSize: 100
          },
          pageTotal: 0,
          accountList: [],
        }
  },
   computed: {
    filterTableColumn() {
      return this.tableColumn.filter((item) => item.visible);
    },
  },
  created(){
     this.getList();
  },
  methods: {
      handleSelectionChange(val) {
        this.multipleSelection = val;
    
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      earlyWarningMode(){
        if(this.multipleSelection==""){
            alert("请选择账号")
        }else{
           this.$router.push({
                name: "toutiao-earlyWarningMode",
                query: {
                    action: 'create',
                },
          })
        }
          
      },
      getList(){
          this.$http({
            method: "get",
            url: "/marketing_tt/api/task_tt_general/get_account_lists",
            params: {
                accountIdAndName:this.accountIdAndName,
                general:0,
                offset: this.page.pageNo,
                limit: this.page.pageSize,
            }
        }).then(res => {  
            if(res.data.code=="1"){
                 this.accountList=res.data.data.list;
                 this.pageTotal = res.data.data.total;
            } else {
                this.$message.error(res.data.msg);
            }
        });
      },
      handlePagerSizeChange(v) {
      this.page.pageSize = v;
      this.getList();
    },
    handlePagerCurrentChange(v) {
      this.page.pageNo = v;
      this.getList();
    },
    getAccount(){
        let ids = localStorage.getItem("ids");
        
        this.$http({
            method: "post",
            url: "/marketing_tt/api/task_tt_general/set_warning",
            params:{
                accountIds:ids,
                general:0,
                consume:this.ruleForm.consume,
                conversion_cost:this.ruleForm.conversion_cost
            }
        }).then(res => {  
            if(res.data.code=="1"){
              this.$message.success(res.data.data)
               this.getList();
               this.dialogVisible=false;
            } else {
                this.$message.error(res.data.msg);
            }
        });
    },
    dialogs(){
        if(this.multipleSelection==""){
            alert("请选择账号")
        }else{
           this.dialogVisible=true;
           var arr=[];
               console.log(this.multipleSelection.length)
           for(var i=0;i<this.multipleSelection.length;i++){
              arr.push(this.multipleSelection[i].accountId);
           }
            var obj =arr.toString();
            localStorage.setItem("ids",obj);  
            
        }
        
        
    }
  }
  

}
</script>
<style>
*{
    padding: 0;
    margin: 0;
}
.input-with-select{
    width: 25%;
}
.el-table{
    margin-top: 1%;
}
.btns{
    margin-top: 1%;
}
.dialog-content-title{
    margin-left: 50px;
    padding:10px 5px ;
    height: 129px;
    background: inherit;
    background-color: rgba(249, 249, 249, 1);
    line-height: 25px;
} 
.toutiao-demo-ruleForm {
    margin-left: 50px;
}
.toutiao-demo-ruleForm .el-form-item__label{
    width: 200px !important;
}
.toutiao-demo-ruleForm .el-form-item__content{
    margin-left: 300px !important;
}
</style>